<template>
  <h2 id="title11">使用loading</h2>

  <div v-bgloading="boxLoading" class="box">box</div>
  <div v-bgloading="boxLoading" class="box">box2</div>
</template>
  
<script setup lang='ts'>
import { getCurrentInstance, onMounted, ref } from 'vue'
const instance = getCurrentInstance()
let boxLoading = ref(false)

onMounted(() => {
  const el: HTMLElement = document.getElementById('title11') as HTMLElement
  instance?.proxy?.$bgLoading?.show()
  
  setTimeout(() => {
    instance?.proxy?.$bgLoading?.hide()
    boxLoading.value = true
    setTimeout(() => {
      boxLoading.value = false
    },2000)
  },2000)
}) 

</script>
<style scoped>
#title11 {
}

.box{
  height: 100px;
  width: 100px;
  background-color: aquamarine;
}
</style>